<template>
  <div class="authing">
    <Header  @changeLogin="changeLogin"></Header>
    <AuthingPhone v-if="showStatus[0]"></AuthingPhone>
    <AuthingWx v-else-if="showStatus[1]"></AuthingWx>
    <div class="divider"><el-divider >第三方账号登录</el-divider></div>
  </div>
</template>

<script>
import Header from './header'
import AuthingWx from './wx'
import AuthingPhone from './phone'

export default {
  name: 'Authing',
  data() {
    return {
      showStatus: [true, false]
    }
  },
  components:{ Header,AuthingWx,AuthingPhone },
  methods: {
    changeLogin(showStatus){
      this.showStatus = showStatus
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/variables.scss";
  .authing{
    background: $base-main-color;
    width: 450px;
    height: 700px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 40%;
    margin: -250px 0 0 -225px;
    // display: flex;
    justify-content: center;
    align-items: center;
    .divider{
      padding: 0 80px 0 80px;
    }
  }

</style>
